import { initState } from "./state";
import {compilToFunction } from './compiler/index'
import { mountComponent } from "./lifecycle";

export function initMixin(Vue) {
  Vue.prototype._init = function (options) { //初始化方法,把_init绑在Vue实例上
    const vm = this;
    vm.$options = options; //将用户的选项挂载在VM实例上，作用是让其他原型方法可以拿到options
    initState(vm); //初始化状态

    //以下是模板引擎的代码处理
    if (options.el) {
      vm.$mount(options.el) //实现数据的挂载
    }
  }
  // $mount功能主要是找模板引擎
  Vue.prototype.$mount = function (el) {
    const vm = this;
    el = document.querySelector(el); //拿到#app的结点
    let ops = vm.$options; // ops用户的配置项
    if (!ops.render) { //看有无render函数  //拿用户的自定义模板或#app模板
      let template;
      if (!ops.template && el) {
        template = el.outerHTML;
      } else {
        if (el) {
          template = ops.template;
        }
      }
      if(template) {
        //这里拿到要编译的模板,然后进行编译
        const render = compilToFunction(template);
        ops.render = render
      }
    }
    /**
     * 作用是使用模板引擎挂载el,渲染页面
     */
    mountComponent(vm, el); //组件的挂载
  //  console.log(ops.render);; //render方法
  }
}
